นำ Bootstrap มาใช้ใน Laravel กันเถอะ

ก่อนหน้านี้ผมได้เขียนบล็อก เกี่ยวกับ Laravel ไปแล้วว่ามันมีความสามารถอะไรบ้างและสะดวกในการใช้งานพัฒนาเว็บแอพพลิเคชั่นยังไง สามารถย้อนไปดูได้จาก ลิ้งนี้นะครับ Laravel

ครั้งนี้ผมจะมาเขียนเกี่ยวกับตัว Front-end framework ที่นักพัฒนาส่วนใหญ่นิยมนำมาเป็นตัวเลือกเพื่อใช้ในการออกแบบ และ สร้างเว็บไซต์ให้มีความทันสมัยพร้อมด้วยลูกเล่นที่หลากหลายนั้นก็คือ Bootstrap

Bootstrap คืออะไร ?

Bootstrap คือชุดคำสั่งที่ประกอบด้วยภาษา CSS, HTML และ Javascript เป็นชุดคำสั่งที่ถูกพัฒนาขึ้นมาเพื่อกำหนดกรอบหรือ รูปแบบการพัฒนาเว็บไซต์ในส่วนของการปฏิสัมพันธ์กับผู้ใช้งานเว็บไซต์ ( User Interface ) เราจึงสามารถเรียก Bootstrap ว่าเป็น Front-end framework ที่ใช้สำหรับ พัฒนาเว็บไซต์ส่วนการแสดงผล ซึ่งแตกต่างจากภาษาประเภท Server Side Script อย่าง PHP, Python หรือภาษาอื่น ๆ

ทำไมต้องเป็น Bootstrap ?

จุดเด่นของของ Bootstrap Framework

• มี UI เริ่มต้นแบบที่สวยงามและใช้งานง่าย
• มีการปรับปรุงและพัฒนาอย่างต่อเนื่อง
• เป็นที่นิยมของนักพัฒนาทั่วโลก ทำให้สามารถเรียนรู้และแก้ปัญหาได้ง่าย
• โค้ดหรือชุดคำสั่งต่าง ๆ ค่อนข้างสะอาดมีโฟลเด้อต้นแบบแค่ 3 ส่วนคือ js, css, fonts
• ประหยัดเวลาในการพัฒนาเว็บไซต์และนำไปพัฒนาต่อได้ง่าย
• เป็น Responsive Framework พัฒนาเว็บไซต์ที่รองรับการแสดงผลได้หลากหลาย Device

โดยปกติแล้ว Laravel จะมีรูปแบบ public ซึ่งแบ่ง css และ js ให้อยู่แล้วเพื่อง่ายและมีอิสระในการเรียกใช้งานเฟรมเวิร์คต่างๆจากภายนอก ซึ่งในครั้งนี้ผมจะมาพูดเกี่ยวกับ การนำ Bootstrap มาใช้งานใน Laravel กัน

อันดับแรกเริ่มที่การติดตั้ง Bootstrap กันก่อน โดยในที่นี้เราจะใช้ตัว Bootstrap 4.4.1 ซึ่งเป็นเวอร์ชั่นล่าสุดของ Bootstrap ในตอนนี้ สามารถดาวน์โหลดและดูขั้นตอนการติดตั้งได้จาก ลิ้งนี้

ตัวอย่างการใข้งาน Bootstrap

• Responsive tables คือ Bootstrap ส่วนใหญ๋ที่คนมักนิยมเอามาใช้งานกัน ในการพัฒนาเว็บไซต์ เนื่องจากสามารถสร้างตารางที่มีการตอบสนองของหน้าจอผู้ใช้งานได้ ไม่ว่าจะเข้าใช้งานเว็บไซต์จาก มือถือ,แท็บเล็ต หรือในหน้าจอคอมก็ตาม ตัวตาราง จะมีการปรับขนาดให้เหมาะสมตามหน้าตาจอของผู้ใช้งาน ซึ่งเป็นโค้ดที่สะดวกและใช้งานง่ายอย่างมาก

  และนี้คือ ตัวอย่างโค้ด เพียงแค่ใส่ class="table-responsive" เท่านั้น ก็สามารถใช้งานได้เลย หากมีการติดตั้ง Bootstrap ลงในโปรเจคของเราแล้ว สามารถศึกษาข้อมูลเพิ่มเติมได้ที่ ลิ้งนี้

• Aligning images เป็นการจัดรูปแบบ ตำแหน่งของรูปภาพต่างๆ ในเว็บไซต์ของเรา โดยเราสามารถเลือกได้ว่า จะจัดตำแหน่งของรูปภาพให้อยู่ตรงไหน หรือ มุมไหนในโปรเจคของเรา เพียงแค่ใส่แท็ก class="rounded float-left" ตามตัวอย่างดังต่อไปนี้

  สามารถศึกษาข้อมูลเพิ่มเติมได้ที่ ลิ้งนี้

• Unstyled คือการจัดรูปแบบตัวหนังสือและย่อหน้าในโปรเจคของเรา ให้เป็นไปตามรูปแบบที่สวยงาม อ่านง่าย และสะดวกต่อการดูข้อมูลต่างๆ โดยที่เราไม่จำเป็นต้อง ใส่แท็ก หรือ เขียนอะไรมากมายเพื่อจัดรูปแบบตัวหนังสือ ซึ่งเป็นเรื่องที่สะดวกมากในการใช้งาน และนี้คือตัวอย่างรูปแบบโค้ดที่นำมาใช้งาน

  สามารถศึกษาข้อมูลเพิ่มเติมได้ที่ ลิ้งนี้

สุดท้ายผมหวังว่า ทุกท่านจะนำ Bootstrap มาเป็นพื้นฐานในการพัฒนาโปรแกรมหรือเว็บไซต์ของตัวเอง เพื่อความสะดวกและง่ายในการใช้งาน และ ลดเวลาในการทำงานให้มีความรวดเร็วมากยิ่งขึน ช่วงระยะแรก อาจจะจำเป็นต้องค้นหาข้อมูลหรือแท็กที่จำเป็นต้องใช้ แต่ถ้าใช้งานบ่อยๆ แล้วเราก็จะสามารถใช้งาน Bootstrap ควบคู่ไปกับการพัฒนาโปรแกรมได้ลื่นไหลมากเลยครับ